<!--
 * @Author: yuqy
 * @Date: 2023-04-10 17:30:15
 * @LastEditors: yuqy
 * @LastEditTime: 2023-10-11 10:46:19
 * @Descripttion: -
-->

<script >
import "animate.css";
import { ref, watch, inject, computed, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted, onActivated, onDeactivated, onErrorCaptured } from 'vue'
import { useRouter } from 'vue-router'
// 按需引入 iView
// import { Button, Table, Icon, Message } from 'view-ui-plus';
// Message.info(config)
// Message.success(config)
// Message.warning(config)
// Message.error(config)
// Message.loading(config)
// 获取store状态
import { useStore } from 'vuex'
import { showLoadingToast, closeToast } from 'vant'
// 隐去请求框架
import { getAction } from "@/api"
import { isDataView } from 'util/types';

export default {
  setup(){
    // defineProps({
    //   msg: String,
    // })
    const store = useStore()
    const isLoading = computed(()=>{
      return store.state.isLoading
    });
    // 动画切换参数
    const duration = ref({
      enter: 500,
      leave: 200
    })
    // let leaveActiveClass = ref('animate__animated animate__slideOutRight')
    // let enterActiveClass = ref('animate__animated animate__slideInLeft')
    let leaveActiveClass = ref('animate__animated animate__fadeOut')
    let enterActiveClass = ref('animate__animated animate__fadeIn')
    // 路由历史记录
    let routeHistoryArr= new Set()
    let route = useRouter()

    // 监控路由变化
    watch(()=>route.currentRoute.value.path, (newValue, oldValue) => {
      if (routeHistoryArr.has(newValue)) { // 说明是回退的
        routeHistoryArr.delete(newValue)
      } else {
        routeHistoryArr.add(newValue)
      }
    }, { immediate: true })

    // 对加载框进行控制
    watch(() => isLoading.value, (newValue) => {
      if (newValue) {
        showLoadingToast({
          duration: 0,
          message: '加载中...',
          forbidClick: true,
          // loadingType: 'spinner'
        })
      } else {
        closeToast()
      }
    }, { immediate: true })


    // antdegsin 消息框子
    // message.loading('Loading...', 2.5).then(() => {
    //   message.success('Loading success', 3)
    //   message.error('Loading error', 4)
    //   message.warning('Loading warning', 5)
    //   message.info('Loading info', 6)
    //   message.warn('Loading warn', 7)
    // })

    // 加载框操作
    const setLoading = ()=> {
      // 开启加载框
      store.commit('updateLoading', true)
      // 关闭加载框
      store.commit('updateLoading', false)
      // 开启antdegsin 加载框
      store.commit('updateMessageLoading', true)
      // 关闭antdegsin 加载框
      store.commit('updateMessageLoading', false)
    }

    onBeforeMount(() => {
      console.log('我是 onBeforeMount')
    })

    onMounted(() => {
      console.log('我是 onMounted')
      // console.log(this)
    })

    onBeforeUpdate(() => {
      console.log('我是 onBeforeUpdate')
      // console.log(this)
    })

    onUpdated(() => {
      console.log('我是 onUpdated')
    })

    onBeforeUnmount(() => {
      // console.log(this)
      console.log('我是 onBeforeUnmount')
    })

    onUnmounted(() => {
      console.log('我是 onUnmounted')
    })

    onActivated(() => {
      console.log('我是 onActivated')
    })

    onDeactivated(() => {
      console.log('我是 onDeactivated')
    })

    onErrorCaptured(() => {
      console.log('我是 onErrorCaptured')
    })
    
    return { 
      name: '今天是个好日子哦',
      duration,
      leaveActiveClass,
      enterActiveClass,
      setLoading
    }
    // 组件传值
    // 子组件往父组件传值
    // setup(props, { emit }) {
    //   const testEmit = () => {
    //     emit('my-emit', '我是子组件')
    //   }
    //   return {
    //     testEmit
    //   }
    // }
  }
}
</script>
<template>
  <div>
    <router-link to='/login'> 
      <v-btn color='red'>我要去登录哦</v-btn>
    </router-link>
    <router-link to='/test'> 
      <v-btn color='red'>我要去测试页面</v-btn>
    </router-link>
  </div> 
</template>
<style scoped >

#userRoomOutChangeWrap {
  position: fixed;
  opacity: 0;
  top: 0;
  left: 0;
}
.v-application__wrap {
  min-height: 0;
}
/* .v-leave-active {
	transition: all 0.2s ease;
}
.v-enter-active {
	transition: all 0.5s ease;
}
.v-enter-active {
	transition-delay: 0.2s;
} */
.animate__fadeIn {
  transition-delay: 0.5s;
}
/* .v-enter-from,
.v-leave-to {
	opacity: 0;
} */
</style>


